<template>
	<view class="page ">

		<view class="box flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/yidanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in list[1]" :key="v" @click="open(i,v)">
				<view class="box_list_head flex items-center" v-if="(v)%2 ==1">
					<view class="box_title marginRight-30">
						门牌号1-{{v}}
					</view>
					<view class="box_pro">
						{{i.title}}
					</view>
				</view>
				<view class="box_list_head flex items-center flex-end" v-if="(v) % 2 ==0">
					<view class="box_pro marginRight-30">
						{{i.title}}
					</view>
					<view class="box_title ">
						门牌号1-{{v}}
					</view>
				</view>
				<view class="" v-if="i.wordsList.length>0" style="height: 80%;">

					<view class="flex" v-if="i.wordnum==5" style="height: 100%;">
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>5" style="height: 100%;" :style="{
					          backgroundImage: `url('${i.leftimg}')`,
					        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList.slice(0,5)" :key="inx">
									{{inx+1}}.{{it.wordHead}}
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=5" style="height: 100%;" :style="{
					          backgroundImage: `url('${i.leftimg}')`,
					        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList" :key="inx">
									{{inx+1}}.{{it.wordHead}}
								</view>
							</view>
							<view class="pos_img" v-if="index==1" style="height: 100%;" :style="{
					          backgroundImage: `url('${i.rightimg}')`,
					        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList.slice(5,10)" :key="inx">
									{{inx+6}}.{{it.wordHead}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="bg">
			{{zhuang}}
		</view>
		<view class="box box_other flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/erdanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in list[2]" :key="v" @click="open(i,v)">
				<view class="box_list_head flex items-center" v-if="(v)%2 ==1">
					<view class="box_title marginRight-30">
						门牌号2-{{v}}
					</view>
					<view class="box_pro">
						{{i.title}}
					</view>
				</view>
				<view class="box_list_head flex items-center flex-end" v-if="(v)%2 ==0">
					<view class="box_pro marginRight-30">
						{{i.title}}
					</view>
					<view class="box_title ">
						门牌号2-{{v}}
					</view>
				</view>
				<view class="" v-if="i.wordsList.length>0" style="height: 80%;">
					<view class="flex" v-if="i.wordnum==5" style="height: 100%;">
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>5" style="height: 100%;" :style="{
		          backgroundImage: `url('${i.leftimg}')`,
		        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList.slice(0,5)" :key="inx">
									{{inx+1}}.{{it.wordHead}}
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=5" style="height: 100%;" :style="{
		          backgroundImage: `url('${i.leftimg}')`,
		        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList" :key="inx">
									{{inx+1}}.{{it.wordHead}}
								</view>
							</view>
							<view class="pos_img" v-if="index==1" style="height: 100%;" :style="{
		          backgroundImage: `url('${i.rightimg}')`,
		        }">
								<view class="box_list u-line-1 " :class="it.status == 1?'hover':''"
									v-for="(it,inx) in i.wordsList.slice(5,10)" :key="inx">
									{{inx+6}}.{{it.wordHead}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<up-popup :safeAreaInsetBottom="false" mode="center" round="5" :show="phoneShow" @close="close"
			@open="phoneShow = true">
			<view class="popupBox fontSize-28">
				<!-- 	<view class="width-full weight-700 text-center">
					第{{page}}页
				</view> -->
				<view class="flex space-between color-696969">
					<view class="">
						门牌号{{big_sort}}-{{small_sort}}
					</view>

				</view>
				<view class="flex column marginTop-30">
					<view class="flex items-center space-between marginBottom-20" v-for="(it,i) in words" :key="i">

						<view class="fontSize-30 weight-700 width-half">
							{{parseInt(i)+1}}.{{it.wordHead}}
						</view>
						<view class="fontSize-24 width-half">
							<span v-html='it.tran'></span>
						</view>


					</view>
				</view>


			</view>
		</up-popup>
		<!-- 	<up-popup bgColor="transparent" round="8" closeOnClickOverlay :title="'排版设置'" @close="sheetClose"
			:show="sheetShow">
			<view class="sheetBox">
				<view @click="sheetSelect(i)"
					:style="{color:t.color,fontSize:t.fontSize,borderBottom:'1rpx solid #ededed'}"
					class="width-full flex items-center flex-center height-100" v-for="(t,i) in sheetList" :key="i">
					{{t.name}}
				</view>
			</view>
		</up-popup> -->

	</view>
</template>
<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const phoneShow = ref(false);
	const getKnowAreaWordsApi = inject('getKnowAreaWords')
	const getAreaWordsViewApi = inject('getAreaWordsView');
	const updateTypesetApi = inject('updateTypeset');
	const getTypesetApi = inject('getTypeset');
	const acitveData = ref({})
	const words = ref([])

	// let sShow = !uni.getStorageSync('sheetShow') ? true : false


	const list = ref({});
	const page = ref(1);
	const pageVal = ref('');
	const qu_num = ref(2);
	const listShow = ref(false)
	const sheetShow = ref(false);
	const layout = ref('row');
	const loadShow = ref(true)
	const isJy = ref(1)
	const sheetList = ref([{
			name: '排版设置',
			color: '#333',
			fontSize: '33rpx'
		},
		{
			name: '上下区',
			color: '#4161d0',
			fontSize: '33rpx'
		},
		{
			name: '左右区',
			color: '#4161d0',
			fontSize: '33rpx'
		},
	])
	onMounted(() => {

	})

	let refData = {}
	const windowHeight = ref('')
	const windowWeight = ref('')
	onLoad((op) => {
		console.log(op, 241)
		page.value = op.page;


		getAreaWords()
		// 异步获取屏幕高度
		uni.getSystemInfo({
			success: function(info) {
				windowHeight.value = info.windowHeight
				windowWeight.value = info.windowWeight
				console.log('屏幕的高度：' + windowHeight.value);
				console.log('屏幕的宽度：' + windowWeight.value);
			}
		});


	})
	onShow(() => {
		if (!loadShow.value) {
			getAreaWords()
		}
	})
	const zhuang = ref('')
	const getAreaWords = () => {
		getKnowAreaWordsApi({
			page: page.value,
			type: 1,
		}).then(res => {
			console.log(res, 258)
			list.value = res.wordList
			zhuang.value = res.zhuang
			console.log(list.value, 259)

			loadShow.value = false
		})
	}
	const toPage = () => {
		refData['content'] = refData.practice_content
		let stringData = JSON.stringify({
			...refData,
			type: 3
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/practiceWord?data=' + JSON.stringify(refData)
		})
	}
	const toPage2 = () => {
		let stringData = JSON.stringify({
			...refData,
			type: 3
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/rememberWord?data=' + JSON.stringify(refData)
		})
	}
	const close = () => {
		phoneShow.value = false
	}
	const sheetClose = () => {
		sheetShow.value = false
		// uni.setStorageSync('sheetShow', true)
	}
	const sheetSelect = (e) => {
		// layout.value = e == 1 ? 'column' : e == 2 ? 'row' : layout.value
		// uni.setStorageSync('layout', layout.value)
		//e 上下是1 左右是2
		if (e == 1) {
			updateTypesetApi({
				typeset: 'up',
			}).then(res => {
				// console.log('res')
				layout.value = 'about'
			})
		} else if (e == 2) {
			updateTypesetApi({
				typeset: 'about'
			}).then(res => {
				// console.log('res')
				layout.value = 'row'
			})
		} else {
			updateTypesetApi({
				typeset: ''
			}).then(res => {
				// console.log('res')
			})
		}
		sheetClose();
	}
	const big_sort = ref('')
	const small_sort = ref('')
	const rem_count = ref('')
	const unrem_count = ref('')
	const learn_status = ref(0)
	const open = (item, index) => {
		console.log(item, index, 'ooooojhkjhhj')
		learn_status.value = item.learn_status
		big_sort.value = item.big_sort
		small_sort.value = item.small_sort
		getAreaWordsViewApi({
			page: page.value,
			big_sort: item.big_sort,
			small_sort: item.small_sort,
			type: 2
		}).then(res => {
			phoneShow.value = true
			rem_count.value = res.rem_count
			unrem_count.value = res.unrem_count
			words.value = res.wordList
			if (res.wordList && res.wordList.length > 0) {
				refData['subscript'] = big_sort.value + '_' + small_sort.value;
				refData['learn_status'] = learn_status.value;
				refData['rem_count'] = rem_count.value;
				refData['total_count'] = item.total_count;
				refData['sheng'] = unrem_count.value
				refData['wordList'] = res.wordList
				refData['page'] = page.value
				refData['big_sort'] = big_sort.value;
				refData['small_sort'] = small_sort.value;
				refData['practice_content'] = item.practice_content;
				refData['content'] = refData.practice_content
				listShow.value = true
			}
		})


		// phoneShow.value = true
	}
</script>

<style lang="scss">
	.region {
		display: flex;


	}

	.wordBox {
		height: 100%;
		width: 100%;
		// height: calc((100vh - 44px - var(--status-bar-height))/4)
	}

	.activeBorder {
		border: 1rpx dashed #52e449;
	}

	.defaultBorder {
		border: 1rpx dashed #ccc;
	}

	.activeBj {
		background-color: #37a730;
	}

	.defaultBj {
		background-color: #ff5500;
	}

	.tag {
		border-radius: 15rpx;
		padding: 5rpx 10rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.absText {
		font-size: 150rpx;
		color: #c3c3c3;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// width: 100px;
		// height: 100px;
	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}

	.sheetBox {
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.green {
		color: #37a730;
	}


	.box {
		width: 710rpx;
		border: 12rpx solid #51D580;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 10rpx auto 0;

		.box_lists {
			width: calc(50% - 6rpx);
			height: calc(50% - 6rpx);
			border-right: 6rpx solid #51D580;
			border-bottom: 6rpx solid #51D580;

			.box_list_head {
				padding: 16rpx;

				.box_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.box_pro {
					font-weight: bold;
					font-size: 24rpx;
					color: #666666;

				}
			}

			.box_list {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				padding: 5rpx 0;
			}

			.hover {
				color: #51D580;
			}

			.box_list_cont {
				width: 50%;
				position: relative;
			}

			.border_right {
				border-right: 1rpx dashed #CCCCCC;
			}
		}

		.positon_img {
			position: absolute;
			width: 134rpx;
			height: 60rpx;
			top: 50%;
			left: 50%;
			margin-top: -30rpx;
			margin-left: -67rpx;
		}
	}

	.box_other {
		// margin: 0 auto;
	}

	.bg {
		width: 188rpx;
		height: 84rpx;
		background: #FFC300;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #51D580;
		text-align: center;
		line-height: 84rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -104rpx;
		margin-top: -52rpx;
		z-index: 999;
	}

	.noda_img {
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 72rpx auto 22rpx;
	}

	.noda_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		text-align: center;
		color: #999999;
	}

	.pos_img {
		background-size: auto;
		background-repeat: no-repeat;
		background-position: bottom;

	}
</style>